﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebApplication1.WebUI.Login" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!-- Bootstrap 5 CSS -->
    <link href="../Content/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .login-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            padding: 40px;
            transform: translateY(0);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

            .login-card:hover {
                transform: translateY(-5px);
            }

            .login-card::before {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
                transform: rotate(45deg);
                animation: shine 6s infinite;
            }

        @keyframes shine {
            0% {
                left: -50%;
            }

            100% {
                left: 150%;
            }
        }

        .form-control {
            border: none;
            border-bottom: 2px solid #ddd;
            border-radius: 0;
            padding-left: 0;
            transition: all 0.3s ease;
        }

            .form-control:focus {
                box-shadow: none;
                border-bottom-color: #764ba2;
            }

        .btn-login {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            color: white;
            transition: all 0.3s ease;
        }

            .btn-login:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            }

        .social-login a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin: 0 5px;
            transition: all 0.3s ease;
        }

            .social-login a:hover {
                transform: translateY(-3px);
            }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-5 col-lg-4">
                <div class="login-card">
                    <h2 class="text-center mb-4">欢迎登录</h2>
                    <form runat="server">
                        <!-- 用户名输入 -->
                        <div class="mb-4">
                            <label class="form-label">用户名</label>
                            <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" placeholder="请输入用户名"></asp:TextBox>
                            <%--<input type="text" class="form-control" placeholder="请输入用户名">--%>
                        </div>

                        <!-- 密码输入 -->
                        <div class="mb-4">
                            <label class="form-label">密码</label>
                            <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" placeholder="请输入密码" TextMode="Password"></asp:TextBox>
                            <%--<input type="password" class="form-control" placeholder="请输入密码">--%>
                        </div>

                        <!-- 验证码输入 -->
                        <div class="mb-4">
                            <label class="form-label">验证码</label><br />
                            <asp:TextBox ID="TextBox3" style="width:160px;height:40px;" runat="server" placeholder="请输入验证码"></asp:TextBox>
                            <img alt="" onclick="this.src=this.src+'?c='+Math.random();" src="../Handler1.ashx" style="width:160px;height:40px;" />
                            <%--<input type="text" class="form-control" placeholder="请输入用户名">--%>
                        </div>

                        <!-- 记住我 & 忘记密码 -->
                        <div class="d-flex justify-content-between mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox">
                                <label class="form-check-label">记住我</label>
                            </div>
                            <a href="#" class="text-decoration-none">忘记密码？</a>
                        </div>

                        <!-- 登录按钮 -->
                        <asp:Button ID="Button1" runat="server" Text="立即登录" CssClass="btn btn-login w-100 mb-4" OnClick="Button1_Click" />
                        <%--<button type="submit" class="btn btn-login w-100 mb-4">立即登录</button>--%>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="../Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
